Frontend WebCodecs Audio: Opbygning af en realtids-lydbehandlingspipeline

WebCodecs API'et er et kraftfuldt værktøj til at arbejde med lyd- og videodata direkte i browseren. I modsætning til det traditionelle Web Audio API giver WebCodecs adgang på lavt niveau til codecs, hvilket giver udviklere mulighed for at implementere brugerdefinerede pipelines til kodning, afkodning og behandling. Dette åbner op for en verden af muligheder for realtids-lydapplikationer, fra avancerede lydeffekter til live streaming og kommunikationsplatforme.

Hvad er WebCodecs Audio?

WebCodecs Audio giver JavaScript-kode mulighed for direkte at interagere med lyd-codecs i browseren. Det giver finkornet kontrol over kodnings- og afkodningsprocesserne, hvilket giver betydelige ydelsesfordele og fleksibilitet sammenlignet med API'er på højere niveau. Ved at udnytte WebCodecs kan udviklere skabe højt optimerede og tilpassede arbejdsgange for lydbehandling.

Vigtige fordele ved WebCodecs Audio:

• Kontrol på lavt niveau: Direkte adgang til codec-parametre for finjustering og optimering.
• Ydeevne: Hardwareacceleration til kodning og afkodning, hvilket fører til hurtigere behandlingstider.
• Fleksibilitet: Understøttelse af en bred vifte af codecs og muligheden for at implementere brugerdefineret behandlingslogik.
• Realtidskapaciteter: Muliggør oprettelse af responsive og interaktive lydapplikationer.

Opsætning af dit WebCodecs Audio-miljø

Før du dykker ned i koden, er det afgørende at sikre, at din browser understøtter WebCodecs, og at du har en grundlæggende forståelse af JavaScript og asynkron programmering (Promises, async/await). De fleste moderne browsere understøtter WebCodecs, men det er altid en god idé at tjekke kompatibiliteten. Du kan tjekke kompatibiliteten ved hjælp af følgende kodestykke:

            
if ('AudioEncoder' in window && 'AudioDecoder' in window) {
  console.log('WebCodecs Audio understøttes!');
} else {
  console.log('WebCodecs Audio understøttes IKKE i denne browser.');
}

            

              
                Copy
              
            
          

Denne kode tjekker, om AudioEncoder- og AudioDecoder-grænsefladerne er tilgængelige i window-objektet. Hvis begge er til stede, understøttes WebCodecs Audio.

Opbygning af en grundlæggende lydbehandlingspipeline

Lad os oprette et simpelt eksempel, der demonstrerer, hvordan man koder og afkoder lyd ved hjælp af WebCodecs. Dette eksempel vil involvere at fange lyd fra brugerens mikrofon, kode den ved hjælp af et specificeret codec og derefter afkode den igen til afspilning.

1. Optagelse af lyd fra mikrofonen

Vi bruger getUserMedia API'et til at få adgang til brugerens mikrofon. Dette API kræver brugertilladelse, så det er vigtigt at håndtere tilladelsesanmodningen korrekt.

            
async function getMicrophoneStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: false,
    });
    return stream;
  } catch (error) {
    console.error('Fejl ved adgang til mikrofon:', error);
    return null;
  }
}

const stream = await getMicrophoneStream();
if (!stream) {
  console.log('Mikrofonadgang nægtet eller utilgængelig.');
  return;
}

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const bufferSize = 4096; // Juster bufferstørrelse efter behov
const scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1); // 1 input-, 1 output-kanal

source.connect(scriptProcessor);
scriptProcessor.connect(audioContext.destination);

scriptProcessor.onaudioprocess = function(event) {
  const audioData = event.inputBuffer.getChannelData(0); // Hent lyddata fra den første kanal
  // Behandl audioData her (f.eks. kode, filtrer)
  encodeAudio(audioData);
};

            

              
                Copy
              
            
          

Dette kodestykke optager lyd fra mikrofonen og forbinder den til en ScriptProcessorNode. onaudioprocess-hændelseshandleren udløses, når en ny buffer med lyddata er tilgængelig.

2. Kodning af lyd med WebCodecs

Lad os nu kode lyddataene ved hjælp af AudioEncoder API'et. Vi konfigurerer koderen med specifikke codec-parametre.

            
let audioEncoder;

async function initializeEncoder(sampleRate, numberOfChannels) {
  const config = {
    codec: 'opus', // Eller 'aac', 'pcm',
    sampleRate: sampleRate,
    numberOfChannels: numberOfChannels,
    bitrate: 64000, // Juster bitrate efter behov
    // Tilføj andre codec-specifikke parametre her
  };

  audioEncoder = new AudioEncoder({
    output: encodedChunk => {
      // Håndter kodet lyd-chunk
      decodeAudio(encodedChunk);
    },
    error: e => {
      console.error('Koderfejl:', e);
    }
  });

  try {
    await audioEncoder.configure(config);
    console.log('Koder konfigureret succesfuldt.');
  } catch (error) {
    console.error('Kunne ikke konfigurere koder:', error);
  }
}

async function encodeAudio(audioData) {
  if (!audioEncoder) {
        await initializeEncoder(audioContext.sampleRate, 1); //Initialiser med mikrofondatastrømmens specifikationer
    }
  // Opret et AudioData-objekt fra Float32Array
  const audioFrame = new AudioData({
    format: 'f32-planar',
    sampleRate: audioContext.sampleRate,
    numberOfChannels: 1,
    numberOfFrames: audioData.length,
    timestamp: performance.now(), // Brug et tidsstempel
    data: audioData
  });

  audioEncoder.encode(audioFrame);
  audioFrame.close(); // Frigiv ressourcer
}

            

              
                Copy
              
            
          

Denne kode initialiserer en AudioEncoder med den specificerede codec-konfiguration. output-tilbagekaldet påkaldes, hver gang koderen producerer en kodet chunk. Funktionen encodeAudio tager de rå lyddata og koder dem ved hjælp af den konfigurerede koder. Konfigurationen er afgørende: eksperimenter med forskellige codecs (opus, aac) og bitrates for at opnå optimal kvalitet og ydeevne til dit specifikke anvendelsesformål. Overvej målplatformen og netværksforholdene, når du vælger disse parametre. 'f32-planar'-formatet er afgørende og skal matche formatet på de indkommende AudioBuffer-data, som normalt er et Float32Array. Tidsstemplet bruges til at hjælpe med at opretholde lydsynkronisering.

3. Afkodning af lyd med WebCodecs

Lad os nu afkode de kodede lyd-chunks ved hjælp af AudioDecoder API'et.

            
let audioDecoder;

async function initializeDecoder(sampleRate, numberOfChannels) {
  const config = {
    codec: 'opus', // Skal matche koderens codec
    sampleRate: sampleRate,
    numberOfChannels: numberOfChannels,
    // Tilføj andre codec-specifikke parametre her
  };

  audioDecoder = new AudioDecoder({
    output: audioFrame => {
      // Håndter afkodet lyd-frame
      playAudio(audioFrame);
    },
    error: e => {
      console.error('Afkoderfejl:', e);
    }
  });

  try {
    await audioDecoder.configure(config);
    console.log('Afkoder konfigureret succesfuldt.');
  } catch (error) {
    console.error('Kunne ikke konfigurere afkoder:', error);
  }
}

async function decodeAudio(encodedChunk) {
    if (!audioDecoder) {
        await initializeDecoder(audioContext.sampleRate, 1); //Initialiser med mikrofondatastrømmens specifikationer
    }
  audioDecoder.decode(encodedChunk);
}

            

              
                Copy
              
            
          

Denne kode initialiserer en AudioDecoder med en konfiguration, der matcher koderen. output-tilbagekaldet påkaldes, hver gang afkoderen producerer en afkodet lyd-frame. Funktionen decodeAudio tager den kodede chunk og afkoder den. Det codec, der bruges i afkoderkonfigurationen, *skal* matche det codec, der bruges i koderkonfigurationen.

4. Afspilning af den afkodede lyd

Til sidst, lad os afspille den afkodede lyd ved hjælp af Web Audio API'et.

            
async function playAudio(audioFrame) {
  // Opret en AudioBuffer fra AudioData
  const numberOfChannels = audioFrame.numberOfChannels;
  const sampleRate = audioFrame.sampleRate;
  const length = audioFrame.numberOfFrames;
  const audioBuffer = audioContext.createBuffer(numberOfChannels, length, sampleRate);

  for (let channel = 0; channel < numberOfChannels; channel++) {
    const channelData = audioBuffer.getChannelData(channel);
    const frame = new Float32Array(length);
    await audioFrame.copyTo(frame, { planeIndex: channel });
    channelData.set(frame);
  }
  // Opret en buffer-kilde og afspil lyden
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioContext.destination);
  source.start();

  audioFrame.close(); // Frigiv ressourcer
}

            

              
                Copy
              
            
          

Denne kode opretter en AudioBuffer fra den afkodede lyd-frame og bruger derefter en BufferSource-node til at afspille lyden gennem lydkontekstens destination. Det kritiske trin her er at kopiere dataene fra `AudioFrame` over i `AudioBuffer`'s kaneldata. Du skal iterere gennem hver kanal. Efter afspilning skal du sørge for at frigive de ressourcer, der bruges af `AudioFrame`.

Avancerede lydbehandlingsteknikker

WebCodecs Audio åbner døren til en bred vifte af avancerede lydbehandlingsteknikker. Her er et par eksempler:

1. Lydfiltrering

Du kan implementere brugerdefinerede lydfiltre ved at manipulere lyddataene direkte. Dette giver dig mulighed for at skabe effekter som udligning, støjreduktion og rumklang.

            
function applyHighPassFilter(audioData, cutoffFrequency, sampleRate) {
  const rc = 1.0 / (2 * Math.PI * cutoffFrequency);
  const dt = 1.0 / sampleRate;
  const alpha = dt / (rc + dt);

  let previousValue = audioData[0];
  for (let i = 1; i < audioData.length; i++) {
    const newValue = alpha * (previousValue + audioData[i] - previousValue);
    audioData[i] = newValue;
    previousValue = newValue;
  }
  return audioData;
}

            

              
                Copy
              
            
          

Denne kode implementerer et simpelt højpasfilter. Du kan ændre denne kode for at oprette forskellige typer filtre, såsom lavpas-, båndpas- og notch-filtre. Husk, at den specifikke implementering af filteret vil afhænge af den ønskede effekt og lyddataenes egenskaber.

2. Lydvisualisering

Du kan visualisere lyddata ved at analysere frekvensspektret og amplituden. Dette kan bruges til at skabe interaktive visualiseringer, der reagerer på lyden.

            
function visualizeAudio(audioData) {
  const canvas = document.getElementById('audio-visualizer');
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;

  ctx.clearRect(0, 0, width, height);

  const barWidth = width / audioData.length;
  for (let i = 0; i < audioData.length; i++) {
    const barHeight = audioData[i] * height / 2; // Skaler amplitude til lærredets højde
    ctx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
    ctx.fillRect(i * barWidth, height / 2 - barHeight / 2, barWidth, barHeight);
  }
}

            

              
                Copy
              
            
          

Denne kode visualiserer lyddataene som en serie af lodrette søjler. Højden på hver søjle svarer til lydenes amplitude på det pågældende tidspunkt. Mere avancerede visualiseringer kan oprettes ved hjælp af teknikker som Fast Fourier Transform (FFT) til at analysere frekvensspektret.

3. Realtids-lydeffekter

Du kan skabe realtids-lydeffekter ved at manipulere lyddataene, mens de behandles. Dette giver dig mulighed for at skabe effekter som ekko, chorus og forvrængning.

            
function applyEchoEffect(audioData, delay, feedback, sampleRate) {
  const delaySamples = Math.round(delay * sampleRate); // Forsinkelse i samples
  const echoBuffer = new Float32Array(audioData.length + delaySamples);
  echoBuffer.set(audioData, delaySamples);

  for (let i = 0; i < audioData.length; i++) {
    audioData[i] += echoBuffer[i] * feedback;
  }
  return audioData;
}

            

              
                Copy
              
            
          

Denne kode implementerer en simpel ekkoeffekt. Du kan ændre denne kode for at skabe mere komplekse effekter ved at kombinere flere lydbehandlingsteknikker. Husk, at realtids-lydbehandling kræver omhyggelig optimering for at minimere latenstid og sikre en jævn brugeroplevelse.

Overvejelser for et globalt publikum

Når du udvikler lydapplikationer til et globalt publikum, er det vigtigt at overveje følgende faktorer:

• Sprogunderstøttelse: Sørg for, at din applikation understøtter flere sprog for lydmeddelelser, instruktioner og brugergrænseflader.
• Tilgængelighed: Sørg for alternative inputmetoder for brugere med handicap, såsom talegenkendelse og tekst-til-tale.
• Netværksforhold: Optimer dine lyd-codecs og streamingprotokoller til forskellige netværksforhold rundt om i verden. Overvej adaptiv bitrate-streaming for at justere lydkvaliteten baseret på den tilgængelige båndbredde.
• Kulturel følsomhed: Vær opmærksom på kulturelle forskelle i lydpræferencer og undgå at bruge lyde eller musik, der kan være stødende eller upassende i visse regioner. For eksempel kan visse musikalske skalaer eller rytmer have forskellige kulturelle konnotationer i forskellige dele af verden.
• Latenstid: Minimer latenstid for at sikre en responsiv og interaktiv brugeroplevelse, især for realtidskommunikationsapplikationer. Overvej at bruge teknikker som lav-latenstid codecs og optimerede netværksprotokoller for at reducere latenstid.

Kodestykke: Komplet eksempel

Her er et komplet kodestykke, der integrerer de ovenfor diskuterede koncepter:

            
// (Inkluder alle kodestykkerne fra ovenfor: getMicrophoneStream, initializeEncoder, encodeAudio,
// initializeDecoder, decodeAudio, playAudio, applyHighPassFilter, visualizeAudio, applyEchoEffect)

async function main() {
  const stream = await getMicrophoneStream();
  if (!stream) {
    console.log('Mikrofonadgang nægtet eller utilgængelig.');
    return;
  }

  const audioContext = new AudioContext();
  const source = audioContext.createMediaStreamSource(stream);
  const bufferSize = 4096;
  const scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);

  source.connect(scriptProcessor);
  scriptProcessor.connect(audioContext.destination);

  scriptProcessor.onaudioprocess = function(event) {
    const audioData = event.inputBuffer.getChannelData(0);

    // Anvend et højpasfilter
    const filteredAudioData = applyHighPassFilter(audioData.slice(), 400, audioContext.sampleRate);

    // Anvend en ekkoeffekt
    const echoedAudioData = applyEchoEffect(filteredAudioData.slice(), 0.2, 0.5, audioContext.sampleRate);

    // Visualiser lyden
    visualizeAudio(echoedAudioData);

    encodeAudio(audioData);
  };
}

main();

            

              
                Copy
              
            
          

Konklusion

Frontend WebCodecs Audio giver en kraftfuld og fleksibel måde at bygge realtids-lydbehandlingspipelines i webapplikationer. Ved at udnytte den kontrol på lavt niveau og hardwareacceleration, som WebCodecs tilbyder, kan udviklere skabe højt optimerede og tilpassede lydoplevelser. Fra lydeffekter og visualiseringer til live streaming og kommunikationsplatforme åbner WebCodecs Audio op for en verden af muligheder for fremtiden for web-lyd.

Yderligere udforskning

• WebCodecs API-dokumentation
• AudioEncoder API-dokumentation
• AudioDecoder API-dokumentation

Eksperimenter med forskellige codecs, parametre og behandlingsteknikker for at opdage det fulde potentiale i WebCodecs Audio. Vær ikke bange for at udforske brugerdefinerede algoritmer og visualiseringer for at skabe unikke og engagerende lydoplevelser for dine brugere. Mulighederne er uendelige!